import React from 'react';

import Form from 'antd/lib/form';
import 'antd/lib/form/style';
import Input from 'antd/lib/input';
import 'antd/lib/input/style';
import Button from 'antd/lib/button';
import 'antd/lib/button/style';
import Row from 'antd/lib/row';
import 'antd/lib/row/style';
import Col from 'antd/lib/col';
import 'antd/lib/col/style';
import { Link } from 'react-router';

const FormItem = Form.Item;
const createForm = Form.create;

const styles = {
    form: {
        width: "90%",
        margin: "auto",
        marginTop: "10%",
        padding: "5%",
        border: "1px solid #d9d9d9",
        borderRadius: "6px"
    },
    input: {
        backgroundColor: "rgba(255, 255, 255, 0.3)"
    },
    label: {
        textAlign: "center",
        fontSize: "1.5rem",
        color: "#858585"
    },
    button: {
        marginLeft: "0.5rem",
        marginRight: "0.5rem"
    }
}

class Sign extends React.Component {

    constructor(props) {
        super(props);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleSubmit(event) {
        var evn = event || window.event;   
        if (evn.preventDefault) {    
            evn.preventDefault();   
        } else { 
            window.event.returnValue = false;   
        }  
        this.props.form.validateFields((error , values) => {
            if (!!error) {
                return ;
            }
            this.props.handleSubmit(values);
        });
    }

    render() {
        const { getFieldProps, getFieldError, isFieldValidating } = this.props.form;
        const usernameProps = getFieldProps('username', {
            rules: [
                { required: true, whitespace: true, message: '请填写登录账号' },
                { validator: this.props.checkUsername },
            ],
        });
        const passwordProps = getFieldProps('password', {
            rules: [
                { required: true, whitespace: true, message: '请填写登录密码' },
                { validator: this.props.checkPassword },
            ],
        });
        const linkToRegister = "register";
        const linkToAsGuest = "/";
        return (
            <Form horizontal onSubmit={this.handleSubmit} style={styles.form}>
                <FormItem
                    style={styles.label}>
                    <p className="ant-form-text" >登录</p>
                </FormItem>
                <FormItem
                    id="control-input"
                    >
                    <Input {...usernameProps} placeholder="登录账号......" style={styles.input} />
                </FormItem>
                <FormItem
                    id="control-input"
                    >
                    <Input {...passwordProps} placeholder="登录密码......" style={styles.input}/>
                </FormItem>
                <Row>
                    <Col style={{ textAlign: 'center' }}>
                        <Button style={styles.button} type="primary" htmlType="submit">登录</Button>
                        <Link to={linkToRegister}><Button style={styles.button} >注册</Button></Link>
                        <Link to={linkToAsGuest}><Button style={styles.button} >游客</Button></Link>
                    </Col>
                </Row>
            </Form>
        );
    }
}

Sign = createForm()(Sign);

export default Sign;